<template>
    <div class="iframe">
        <div class="i-title">
            <h3>动态组件</h3>
        </div>
        <div class="i-tip">
            <el-button @click="change">默认模板</el-button>
            <el-button @click="change2" type="danger">其他模板</el-button>
        </div>
        <div class="i-tip">
            <component :is="pstu.def"></component>
        </div>
    </div>
</template>

<script>
    import {
        reactive
    } from "vue";
    import TaaComp from "./TaaComp.vue"
    import TbbComp from "./TbbComp.vue"
    export default {
        components: {
            TaaComp,
            TbbComp
        },
        setup() {
            let pstu = reactive({
                def: "TaaComp"
            })
            function change() {
                pstu.def = "TaaComp";
            }
            function change2() {
                pstu.def = "TbbComp";
            }
            return {
                pstu,
                change,
                change2
            }
        }
    }
</script>

